<!--suppress JSUnresolvedVariable -->
<template>
	<div class="root">
		<div class="index-container">
			<el-card class="box-card left">
				<div class="info">
					<div class="photo" @click="changeHeadImg" style="cursor: pointer">
						<img :src="loadResource(userInfoDetail.header)" alt="">
					</div>
					<p v-if="userInfoDetail.rootAdmin" class="name">Admin</p>
					<p class="name">{{ userInfoDetail.nickname }}</p>
				</div>
				<div class="introduce">
					<div class="item">
						<i class="el-icon-ice-cream-round"></i>
						<a href="#" style="color: #0b9aff;text-decoration: none">
							http://localhost:12000{{ userInfoDetail.pageUrl }}
						</a>
					</div>
					<div class="item">
						<i class="el-icon-ice-cream-square"></i>
						<p>{{ userInfoDetail.email }}</p>
					</div>
					<div class="item">
						<i class="el-icon-lollipop"></i>
						<p>123</p>
					</div>
				</div>
				<el-divider><i class="el-icon-edit"></i></el-divider>

			</el-card>
			<el-card class="box-card right">
				<h1>个人资料</h1>
				<el-tabs v-model="activeName">
					<el-tab-pane label="基本资料" name="first">
						<el-form ref="infoForm"
						         :model="userInfoDetail"
						         :rules="userInfoRules">
							<el-form-item label="登录用户名" prop="username" style="margin-bottom: 15px">
								<el-input v-model="userInfoDetail.username"></el-input>
							</el-form-item>
							<el-form-item label="电话号" prop="mobile" style="margin-bottom: 15px">
								<el-input v-model="userInfoDetail.mobile"></el-input>
							</el-form-item>
							<el-form-item label="电子邮件" prop="email" style="margin-bottom: 15px">
								<el-input v-model="userInfoDetail.email"></el-input>
							</el-form-item>
							<el-form-item label="个人说明" style="margin-bottom: 15px">
								<el-input type="textarea" placeholder="可以是普通文本或者html" v-model="userInfoDetail.sign"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="saveInfo">保存</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane v-if="userInfoDetail.id<100000" label="修改密码" name="second">
						<el-form :model="ruleForm"
						         ref="passwordForm"
						         status-icon
						         :rules="rules"
						         class="demo-ruleForm">
							<el-form-item label="原密码" prop="oriPassword">
								<el-input type="password" v-model="ruleForm.oriPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item label="新密码" prop="nowPassword">
								<el-input type="password" v-model="ruleForm.nowPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPassword">
								<el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="changePassword">提交</el-button>
								<el-button @click="resetForm">重置</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
          <el-tab-pane label="其他资料" name="third">
            <el-form ref="infoForm"
                     :model="userInfoDetail"
                     :rules="userInfoRules">
              <el-form-item label="昵称" prop="nickname" style="margin-bottom: 15px">
                <el-input v-model="userInfoDetail.nickname"></el-input>
              </el-form-item>
              <el-form-item label="所在城市" prop="city" style="margin-bottom: 15px">
                <el-input v-model="userInfoDetail.city"></el-input>
              </el-form-item>
              <el-form-item label="职业" prop="job" style="margin-bottom: 15px">
                <el-input v-model="userInfoDetail.job"></el-input>
              </el-form-item>
              <el-form-item label="生日">
                <el-col :span="11">
                  <el-date-picker
                    v-model="userInfoDetail.birth"
                    type="date"
                    placeholder="Pick a date"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="userInfoDetail.gender">
                  <el-radio label="男" />
                  <el-radio label="女" />
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveInfo">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="音乐账户绑定" name="forth">
            <el-form :model="musicAccount">
              <el-form-item label="网易云账户" prop="nickname" style="margin-bottom: 15px">
                <el-input v-model="musicAccount.phone"></el-input>
              </el-form-item>
              <el-form-item label="网易云密码" prop="city" style="margin-bottom: 15px">
                <el-input type="password" v-model="musicAccount.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveMusicAccount">绑定</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
				</el-tabs>
			</el-card>
		</div>
		<ImgDrawer
				:isDrawer="drawer"
				@clickCallback="handlePickPic"
		></ImgDrawer>
	</div>
</template>

<script setup lang="ts">
import {defineComponent, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {get, loadResource, post} from "../http";
import {useRoute, useRouter} from "vue-router";
import ImgDrawer from '../components/ImgDrawer.vue'
import FullScreen from '../components/FullScreen.vue'
import {useStore} from "vuex";
import {copyProperties, copyPropertiesHasNull, resTip} from "../util/Common";

const store = useStore();
const router = useRouter();
const route = useRoute();
const {proxy}: any = getCurrentInstance();
defineComponent({
	ImgDrawer,
	FullScreen
})
let drawer = ref(false)

//更换头像
function changeHeadImg() {
	drawer.value = !drawer.value;
}

//更换头像
async function handlePickPic(url: string) {
   console.log(url)
	const response = await post(`/member/message/picture/update?headImg=${url}`,{});
	if (response.code == 200) {
		initData().then()
		store.commit('notifyReloadNickNameAndHeadImg')
	} else {
		proxy.$notify.error({
			title: '出差啦😢！',
			message: response.msg
		})
	}
}


//**********************************校验**********************************start
let userInfoRules = reactive({
	username: [
		{required: true, message: '用户名不能为空', trigger: 'blur'},
		{min: 4, max: 20, message: '用户名长度在 4 到 20 个字符', trigger: 'blur'}
	],
	nickname: [
		{required: true, message: '昵称不能为空', trigger: 'blur'},
		{min: 3, max: 30, message: '昵称长度在 3 到 30 个字符！', trigger: 'blur'}
	],
	email: [
		{required: true, message: '请输入邮箱地址', trigger: 'blur'},
		{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
	]
})


//密码验证表单
let ruleForm = reactive({
   oriPassword: '',
   nowPassword: '',
	 checkPassword: '',
   email: ''
})
//密码校验
let rules = reactive({
   oriPassword: [
		{validator: validatePass, trigger: 'blur'}
	],
   nowPassword: [
		{validator: validatePass, trigger: 'blur'}
	],
   checkPassword: [
		{validator: validatePass2, trigger: 'blur'}
	]
})

function validatePass(rule: any, value: string, callback: any) {
	if (value != '') {
		callback()
	} else {
		callback(new Error("请输入密码！"))
	}
}

function validatePass2(rule: any, value: any, callback: any) {
	if (ruleForm.nowPassword == ruleForm.checkPassword) {
		callback();
	} else {
		callback(new Error('两次输入密码不一致!'));
	}
}

//重置密码表单
function resetForm() {
	ruleForm.nowPassword = '';
	ruleForm.checkPassword = '';
}

//**********************************校验**********************************end
//******************************tab1下面方法与参数**********************************start
interface userInfo {
	 username: string,
	 nickname: string,
	 email: string,
   levelId: number,
   mobile: string,
   header: string,
   gender: string,
   birth: string,
   city: string,
   job: string,
   sign: string
   id: number
}

let userInfoDetail: userInfo = reactive<userInfo>({
   username: '',
   nickname: '',
   email: '',
   levelId: 1,
   mobile: '',
   header: '',
   gender: '',
   birth: '',
   city: '',
   job: '',
   sign: '',
   id: 0
})
let activeName = ref<any>('first')
//数据回显
onMounted(async () => {
	initData().then();
  if (route.query.activeName){
    activeName.value=route.query.activeName;
  }
})
let page = 1

/**
 * 获取个人用户消息
 */
async function initData() {
	const userInfo = store.state.userInfo;
	if (Object.keys(userInfo).length!==0){
		copyProperties(userInfo, userInfoDetail)
	}else {
		const response = await get('/member/message/query');
		if (response.code == 200) {
			const resData: userInfo = response.data
			copyProperties(resData, userInfoDetail)
		} else {
			proxy.$notify.error({
				title: '出差啦😢！',
				message: response.msg
			})
		}
	}
}

let infoForm = ref()

function saveInfo() {
	infoForm.value.validate((valid:any) => {
		if (valid) {
			submit()
		} else {
			console.log('error submit!!');
			return false;
		}
	});
}

//提交
async function submit() {
	const response = await post('/member/message/update', {
		 username: userInfoDetail.username,
		 nickname: userInfoDetail.nickname,
		 email: userInfoDetail.email,
     mobile: userInfoDetail.mobile,
     gender: userInfoDetail.gender,
     sign: userInfoDetail.sign,
     birth: userInfoDetail.birth,
     city: userInfoDetail.city,
     job: userInfoDetail.job
	});
	if (response.code == 200) {
		proxy.$notify({
			title: '成功',
			message: '修改成功!',
			type: 'success'
		})
	} else {
		proxy.$notify.error({
			title: '出差啦😢！',
			message: response.msg
		})
	}
}

let passwordForm = ref();

function changePassword() {
	passwordForm.value.validate(async (valid:any) => {
		if (valid) {
			const response = await post('/member/update/password', {
				 oriPassword: ruleForm.oriPassword,
				 nowPassword: ruleForm.checkPassword,
         email: ruleForm.email
			})
			if (response.code == 200) {
				proxy.$notify({
					title: '成功',
					message: '修改成功，请重新登录!',
					type: 'success'
				})
				await router.push('/login');
			} else {
				proxy.$notify.error({
					title: '出差啦😢！',
					message: response.msg
				})
			}
		} else {
			console.log('error submit!!');
			return false;
		}
	});
}

interface musicAccountI{
  phone:string;
  password:string;
}

let musicAccount=reactive<musicAccountI>({
  phone:'',
  password:''
});

async function saveMusicAccount() {
  resTip(proxy,await post(`/member/bind/musicBind?phone=${musicAccount.phone}&password=${musicAccount.password}`,{}));
}



//******************************tab3下面方法与参数**********************************end
</script>

<style scoped lang="scss">
.root {
	height: 100%;

	.index-container {
		display: flex;
		width: 100%;
		justify-content: space-between;

		.box-card.left {
			width: 49%;
			height: 660px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.photo {
				width: 70px;
				height: 70px;
				box-sizing: content-box;
				margin: auto;
				border-radius: 50%;
				background: #fff;
				overflow: hidden;
				transition: all .3s;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.name {
				margin-top: 15px;
				color: #000000;
				text-align: center;
				font-size: 25px;
			}

			.introduce {
				margin: 20px;

				.item {
					margin: 10px;

					p {
						display: inline;
					}
				}
			}

			.statistics {
				padding-top: 20px;
				margin: 20px;

				.el-divider {
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}
		}

		.box-card.right {
			width: 49%;
			height: 80%;

			h1 {
				font-size: 20px;
				font-weight: lighter;
			}

			:deep(#pane-first .el-form-item) {
				margin-bottom: 0;
			}

			:deep(.el-textarea__inner) {
				height: 180px;
			}

			:deep(.el-table__expanded-cell) {
				padding: 20px;
			}

			.expand {
				margin: auto 0;
				width: 100%;
				height: 80%;

				.info {
					.photo {
						width: 70px;
						height: 70px;
						margin: auto;
						border-radius: 50%;
						background: #fff;
						overflow: hidden;
						transition: all .3s;

						img {
							width: 100%;
							height: 100%;
						}

					}

					.name {
						margin-top: 5px;
						color: #000000;
						text-align: center;
						font-size: 18px;
					}
				}

				.introduce {
					margin: 10px;

					.item {
						margin: 10px;

						p {
							display: inline;
							text-align: center;
						}
					}

					.email {
						display: flex;
						justify-content: center;
						margin: 10px;
					}

					.text {
						span {
							display: block;
							text-align: center;
							margin-bottom: 10px;
							margin-top: 5px;
						}

					}


				}

			}

		}
	}

}

.permission-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 65%;
	overflow: auto;
	//height: 90%;

	&::-webkit-scrollbar {
		width: 0;
	}

	.newUserForm {

		.item {
			margin: 10px;
			display: flex;
			justify-content: left;
			align-items: center;

			span {
				width: 80px;
				text-align: left;
			}

			.el-input {
				margin-left: 20px;

			}

			.el-select {
				width: 100%;
			}
		}

		.permission.item {
			margin: 0;
			display: flex;
			flex-direction: column;

			.permissionContainer {
				margin: 10px;
				width: 80%;

				.line {
					margin: 20px;

					.el-switch {
						margin-bottom: 15px;
					}


				}
			}
		}
	}
}

.shake-horizontal {
	color: #ea0707;
	animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-horizontal {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60% {
		transform: translateX(10px);
	}
	80% {
		transform: translateX(8px);
	}
	90% {
		transform: translateX(-8px);
	}
}
</style>